import React from 'react';
import { connect } from 'dva'
import { Page } from 'components'
import OrderFilterUnExpand from 'components/Filter/OrderFilterUnExpand';
import { Button, Badge,Modal } from 'antd'
import { LwjDialog } from 'components'
import PageHeaderLayout from 'components/Layout/PageHeaderLayout'
import moment from 'moment'
import { contractOrderType, productType } from 'utils/enumConfig'
import LwjTable from './LwjTable/LwjTable'
import {
  sourceSystem, profitsStatus
} from 'utils/enumConfig'
import { debug } from 'util';

const profitses = ({ location, dispatch, profits, loading }) => {
  const {
    items,
    isExpand,
    pagination,
    selectedRowKeys
  } = profits

  const breadcrumbList = [
    {
      title: '订单管理'
    },
    {
      title: '分润'
    }
  ];

  // 定义筛选属性 表单相关
  const filterProps = {
    filterItems: [
      {
        type: 'input',
        id: 'contractNum',
        title: '合同号'
      }, {
        type: 'select',
        id: 'profitsStatuses',
        title: '状态',
        options: [
          {
            value: '',
            name: '全部'
          },
          {
            value: 'PENDING_PROFITS',
            name: '可分润'
          }, {
            value: 'PROFITS',
            name: '待分润'
          }, {
            value: 'DIVIDED_PROFITS',
            name: '已分润'
          }, {
            value: 'DENY_PROFITS',
            name: '不能分润'
          }
        ]
      }, {
        type: 'dateRule',
        id: 'thirdOrderDoneTime',
        dateFormat: 'YYYY/MM/DD HH:mm:ss',
        title: '订单完成时间'
      }, {
        type: 'input',
        id: 'distributorName',
        title: '门店名称'
      }, {
        type: 'input',
        id: 'customerName',
        title: '客户姓名'
      },
    ],
    onFilterChange(value) {
      dispatch({
        type: 'profits/query',
        payload: {
          ...value
        }
      })
    },
    isExpand,
    noExpand() {
      dispatch({ type: 'profits/unExpandFilter', payload: {} })
    },
    expand() {
      dispatch({ type: 'profits/expandFilter', payload: {} })
    }
  }

  // 列表相关
  const listProps = {
    dataSource: items,
    loading: loading.effects['profits/query'],
    pagination,
    pageChangeAction: 'profits/query',
    dispatch,
    location,
    selectedRowKeys,
    selectType: "multiple",
    onSelectRows(selectedRowKeys, selectRows) {
      let needDividedIds = [];
      if (_.isArray(selectRows)) {
        selectRows.forEach((value, index, array) => {
          if (value.profitsStatus === 'PROFITS') {
            needDividedIds = [...needDividedIds, value.id]
          }
        })
      }
      dispatch({
        type: 'profits/onSelectChange',
        payload: {
          selectRows: selectRows,
          selectedRowKeys: needDividedIds
        }
      });
    }
  };

  const contractOrderColumns = [
    {
      title: '合同号',
      dataIndex: 'contractNum',
      key: 'contractNum',
      render: (text, record) => (
        <span>
          <a onClick={() => onShowDetail(record)}>{record.contractNum}</a>
          <Button
            onClick={() => onShowDetail(record)}
            size="small"
            shape="circle"
            icon="search"
            style={{ marginLeft: 5 }} />
        </span>
      )
    }, {
      title: '所属门店',
      dataIndex: 'salesDistributorName',
      key: 'salesDistributorName'
    }, {
      title: '订单来源',
      dataIndex: 'sourceSystem',
      key: 'sourceSystem',
      render: (text, record, index) => (<div>
        {_.isEmpty(sourceSystem[record.sourceSystem]) ? "分销系统" : sourceSystem[record.sourceSystem]}
      </div>)
    }, {
      title: '客户信息',
      dataIndex: 'customerInfo',
      key: 'customerInfo',
      render: (text, record, index) => (record.customerName + " / " + record.customerPhoneNum)
    }, {
      title: '状态',
      dataIndex: 'profitsStatus',
      key: 'profitsStatus',
      render: (text, record, index) => (
        <div>
         {record.profitsStatus==="PENDING_PROFITS" || record.profitsStatus==="DENY_PROFITS"?  <a onClick={() => {
           Modal.info({
             title:record.profitsStatus==="PENDING_PROFITS"?"注意":"无法分润",
             content:record.profitsStatus==="PENDING_PROFITS"?"订单完成30天后才可以分润!":"此订单已退款，不能分润!"
           })
          }}><Badge count="!" style={{ backgroundColor: "#2db5af", position: "relative" }}><span>{profitsStatus[record.profitsStatus]} </span></Badge></a>
          : <span>{profitsStatus[record.profitsStatus]} </span>
        }
        </div>
      )
    }, {
      title: '创建时间',
      dataIndex: 'createTime',
      key: 'createTime',
      render: (text, record, index) => (moment(record.createTime).format("YYYY-MM-DD HH:mm:ss"))
    }, {
      title: '订单完成时间',
      dataIndex: 'thirdOrderDoneTime',
      key: 'thirdOrderDoneTime',
      render: (text, record, index) => (moment(record.thirdOrderDoneTime).format("YYYY-MM-DD HH:mm:ss") === "Invalid date" ? "" : moment(record.thirdOrderDoneTime).format("YYYY-MM-DD HH:mm:ss"))
    }, {
      title: '操作',
      dataIndex: 'handleType',
      key: 'handleType',
      render: (text, record, index) => (
        <span>
          {record.profitsStatus === "PROFITS" && <a onClick={() => doDivided([record.id])}>分润</a>}
        </span>
      )
    }
  ];


  /**
   * 确认OMS报价
   * @param {*} record
   */
  const doDivided = (record) => {
    if(_.isArray(record) && record.length === 0){
      Modal.info({
        title:"注意",
        content:"请至少选择一个待分润的单子"
      })
      return
    }
    LwjDialog.confirm({
      title: '是否确定进行分润？',
      okText: '确认',
      cancelText: '取消',
      onOk() {
        dispatch({
          type: 'profits/doDivided',
          payload: record
        });
      },
      onCancel() { }
    })
  }

  /**
   * 查看详情
   * @param {*} record
   */
  const onShowDetail = (record) => {
    dispatch({
      type: 'profits/toSalesOrderDetail',
      payload: {
        salesOrderId: record.salesOrderId
      }
    })
  }

  return (
    <PageHeaderLayout title="分润列表" breadcrumbList={breadcrumbList}>
      <Page inner>
        <OrderFilterUnExpand {...filterProps} />
        <Button style={{ marginBottom: 5 }} type="primary" onClick={() => {
          doDivided(selectedRowKeys)
        }}>批量分润</Button>
        <LwjTable {...listProps} columns={contractOrderColumns} />
      </Page>
    </PageHeaderLayout>
  )
};

export default connect(({ profits, loading }) => ({ profits, loading }))(profitses)
